<template>
    <div>
        <h3>客户统计</h3>
        <el-table
                :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                style="width: 100%">
            <el-table-column
                    label="客户名称"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="金额"
                    prop="money">
            </el-table-column>

        </el-table>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        name: "CustomerConuntView",

        data() {
            return {
                totalCount: null,
                // 默认显示第几页
                currentPage: 1,
                // 个数选择器（可修改）
                pageSizes: [1, 2, 3, 4],
                // 默认每页显示的条数（可修改）
                PageSize: 3,

                tableData: [],
            }
        },
        mounted() {
            this.init()
        },

        methods: {
            init() {
                let url = "/api/sell/countMoneyByCustom"
                this.$axios.get(url).then(r => {
                    console.log(r.data)
                    this.tableData = r.data
                })
            },

            handleSizeChange(size) {
                // 改变每页显示的条数
                this.PageSize = size
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            // 显示第几页
            handleCurrentChange(size) {
                // 改变默认的页数
                this.currentPage = size
            },
        }
    }
</script>

<style scoped>

</style>